/* stylelint-disable */
@import "../themes/variable";

html {
  direction: ltr;
  height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
  touch-action: manipulation;
}

html,
body,
app-root {
  // overflow-x: hidden;
  height: 100%;
}

body {
  color: $text-color;
  background-color: $content-bg !important;
  overflow: hidden;
}


.progress-bar-container {
  height: 10px;
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  z-index: $zindex + 10;
}

// 全局
.wrapper {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  .unwrap {
    margin-right: -$content-padding;
    margin-left: -$content-padding;
    @media (max-width: $screen-md-max) {
      margin-right: 0;
      margin-left: 0;
    }
  }
}

// 头部
.header {
  position: fixed;
  top: $header-top;
  bottom: $header-bottom;
  left: $header-left;
  right: $header-right;
  display: flex;
  align-items: center;
  padding: $header-layout-padding;
  margin: $header-layout-margin;
  width: $header-wd;
  height: $header-hg;
  background: $header-bg;
  box-shadow: $header-box-shadow;
  z-index: $header-zindex;
  .logo {
    position: $header-logo-position ;
    top: $header-logo-top;
    bottom: $header-logo-bottom;
    left: $header-logo-left;
    right: $header-logo-right;
    margin-left: $header-padding;
    //width: $aside-wd;
    transition: width 0.2s $layout-ease;
    a {
      display: block;
      text-align: center;
    }
    img {
      vertical-align: middle;
      max-width: 100%;
      animation: fadeIn 1s;
      &.collapsed {
        display: none;
      }
      &.expanded {
        display: inline;
      }
    }
  }
}

// 侧边栏
.aside {
  position: fixed;
  top: $aside-top;
  bottom: $aside-bottom;
  left: $aside-left;
  right: $aside-right;
  padding: $aside-padding;
  margin: $aside-margin;
  width: $aside-wd;
  height: $aside-hg;
  background: $aside-bg;
  transition: width 0.2s $layout-ease, translate 0.2s $layout-ease;
  z-index: $aside-zindex;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  &:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-right: 1px solid $content-heading-border;
  }
  &-inner {
    overflow-x: hidden;
    overflow-y: scroll; // margin-right: -17px;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    /* IE10,IE11 */
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    //-ms-overflow-style: none;
    &::-webkit-scrollbar {
      height: $aside-scrollbar-width;
      width: $aside-scrollbar-height;
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 $aside-scrollbar-width $aside-scrollbar-track-color;
    }
    &::-webkit-scrollbar-thumb {
      background-color: $aside-scrollbar-thumb-color;
    }
  }
}

.sidebar-nav {
  margin: 0 0 30px;
}

// 主体
.content {
  margin: $content-margin;
  //padding: $content-margin;
  height: $content-hg;
  border: none;
}

.content__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #929292;
  padding: ($content-padding - 12) $content-padding ($content-padding - 12);
  //padding-top: $content-padding - 12;
  //padding-bottom: $content-padding - 12;
  margin-right: -$content-padding;
  margin-left: -$content-padding;
  margin-bottom: $content-padding;
  background-color: $content-heading-bg;
  border-bottom: 1px solid $content-heading-border;
  > h1 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 0;
    > small {
      display: block;
      font-size: 12px;
      color: $muted-color;
    }
  }
}

.aside-collapsed {
  .header {
    width: $header-collapsed-wd;
    margin: $header-collapsed-margin;
    .logo {
      width: $aside-collapsed-wd;
      top: $header-logo-collapsed-top;
      left: $header-logo-collapsed-left;
      img {
        &.collapsed {
          display: $header-logo-collapsed-display;
        }
        &.expanded {
          display: $header-logo-display;
        }
      }
    }
  }
  .apes-header {
    left: $aside-collapsed-wd;
  }
}

// Desktop
@media (min-width: $screen-md-min) {
  .content {
    margin-left: $content-margin-left;
    //padding-left: $content-margin-left;
  }
  .aside-collapsed {
    .sidebar {
      width: $aside-collapsed-wd;
    }
    .content {
      margin-left: $content-collapsed-margin-left;
      //padding-left: $content-collapsed-margin-left;
    }
  }
}


@media (max-width: $screen-sm) {
  .header {
    .logo {
      width: $aside-collapsed-wd !important;
      img {
        &.collapsed {
          display: $header-logo-collapsed-display !important;
        }
        &.expanded {
          display: $header-logo-display !important;
        }
      }
    }
  }
}
